<template>
  <div class="menu">
    <!-- 搜索模块 -->
    <pageSearch :formConfig="formConfig" @reset="reset" @search="search" />
    <!-- 表格 -->
    <pageTable
      :contentConfig="contentConfig"
      pageName="menu"
      ref="pageTableRef"
      @addClick="handleAdd"
      @editClick="handleEdit"
    >
      <!-- 菜单等级 -->
      <template #pid="scope">
        <el-tag v-if="scope.row.pid === 0">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.pid === 1">二级</el-tag>
        <el-tag type="warning" v-else>规则</el-tag>
      </template>
    </pageTable>
    <!-- 弹窗 -->
    <pageModal
      ref="pageModalRef"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfig"
      pageName="menu"
    ></pageModal>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
// 配置文件
import { formConfig } from "./config/search.config"
import { contentConfig } from "./config/content.config"
import { modalConfig } from "./config/modal.config"

// 搜索组件
import pageSearch from "@/components/page-search"
// table组件
import pageTable from "@/components/page-table"

// 弹窗组件
import pageModal from "@/components/page-modal"
import { usePageModal } from "@/hooks/use-page-modal"
import { mainStore } from "@/stores/modules/main"

import { usePageSearch } from "@/hooks/usePageSearch"

export default defineComponent({
  components: {
    pageSearch,
    pageTable,
    pageModal
  },
  setup() {
    const [pageTableRef, reset, search] = usePageSearch()
    const [pageModalRef, defaultInfo, handleAdd, handleEdit] = usePageModal()

    // 动态添加所属菜单
    const mainstore = mainStore()
    const menuItem = modalConfig.formItems.find(item => item.field === "pid")
    menuItem!.options = mainstore.menuMenuOptions?.map(item => {
      return { title: item.name, value: item.id }
    })
    return {
      formConfig,
      contentConfig,
      pageTableRef,
      reset,
      search,
      handleAdd,
      handleEdit,
      modalConfig,
      pageModalRef,
      defaultInfo
    }
  }
})
</script>

<style scoped lang="less"></style>
